import React, { useEffect, useState } from "react";
import { Card, Row, Col, Flex, Divider, Descriptions } from "antd";
import LGV from "@/assets/image/icons/LGV.svg";
import Motorcycle from "@/assets/image/icons/Motorcycle.svg";
import Privatecar from "@/assets/image/icons/privatecar.svg";
import styled from "styled-components";
import { getCarParkList } from "@/services/carPark";
import { CustomSubTitle } from "@/components/customTitle";
import Time from "@/assets/image/icons/time.svg";
import RadioCarPark from "./RadioCarPark";
import { ParkData } from "../type";
import useParkStore from "@/store/parkStore";
import userStore from "@/store/userStore";
import { getLPNList } from "@/services/lpn-registration";
import { vehTypeMap } from "@/utils";
// 定义卡片数据的类型
interface CardData {
  lpnId: string;
  title: string;
  content: string;
  icon?: string;
  vehType: vehType;
  octopus?: string;
  dppp?: string;
  lpnNo: string;
}

interface CardSelectionProps {
  passType?: passType;
  onSelect?: (selectedId: string) => void; // 外层传递选中的卡片 ID 的回调
}

// 车辆类型到图标的映射
const vehicleIcons: { [key: string]: string } = {
  "Large Good Vehicle": LGV,
  "Motor Cycle": Motorcycle,
  "Private Car": Privatecar,
};

const StyledClock = styled("div")`
  width: 177px;
  height: 49px;
  gap: 4px;
  opacity: 0px;
  font-family: Roboto;
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
  text-align: left;
`;
const StyledImg = styled("img")`
  width: 68px;
  height: 68px;
`;

const StyledVehicleTitle = styled("div")`
  font-family: Roboto;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #7a6145;
`;

const StyledVehicleNo = styled("div")`
  font-family: Roboto;
  font-size: 18px;
  font-weight: 500;
  line-height: 28px;
  text-align: center;
  color: #202020;
`;

// const CountDownSytle: React.CSSProperties = {
//   display: "flex",
//   fontFamily: "Roboto",
//   fontSize: "16px",
//   fontWeight: "400",
//   lineHeight: "24px",
//   textAlign: "left",
//   color: "#7A6145",
// };

const CardSelection: React.FC<CardSelectionProps> = (props) => {
  const {
    passType = "DAILY", // 默认值
  } = props;
  // 使用具体类型定义 cardData 数组
  // const cardData: CardData[] = [
  //   {
  //     id: "option1",
  //     title: "Private Car",
  //     content: "AC123",
  //     icon: privatecar,
  //     vehType: "PRIVATE_CAR",
  //   },
  //   {
  //     id: "option2",
  //     title: "Motorcycle",
  //     content: "XC5689",
  //     icon: Motorcycle,
  //     vehType: "MOTOR_CYCLE",
  //   },
  //   {
  //     id: "option3",
  //     title: "Light Goods Vehicle",
  //     content: "AC123",
  //     icon: LGV,
  //     vehType: "LGV",
  //   },
  // ];

  // 状态来保存选中的卡片 ID 默认选中第一个
  const [selectedId, setSelectedId] = useState<string | null>("");
  const [parkData, setParkData] = useState<ParkData[]>([]);
  const [cardData, setCardData] = useState<CardData[]>([]);
  const { userId } = userStore();
  console.log(userId, "userId");
  const {
    vehType,
    setVehType,
    setParkId,
    setPrice,
    setDpppPrice,
    setVehicleList,
    setParkList,
  } = useParkStore();
  const handleCardClick = (card: CardData) => {
    const vehType = vehTypeMap[card.vehType] || "";
    setSelectedId(card.lpnId); // 更新选中的卡片 ID
    // onSelect(card.id); // 通知外层组件选中的卡片
    setParkId("");
    setPrice("");
    setDpppPrice("");
    setVehType(vehType);
    setParkList({});
    setVehicleList(card);
    // getCodeData();
  };

  const getCodeData = () => {
    getCarParkList({
      vehType,
      userType: "AA",
      passType,
    })
      .then((data) => {
        // const newdata = data.data.push(
        //   {
        //     tariffId: "eea2bd79-047b-4f09-a249-b38fde764709",
        //     parkId: "eea2bd79-047b-4f09-a249-b38fde76470dd",
        //     englishName: "ccc",
        //     price: "100",
        //   },
        //   {
        //     tariffId: "eea2bd79-047b-4f09-a249-b38fde764709",
        //     parkId: "eea2bd79-047b-4f09-a249-b38fde76470dd",
        //     englishName: "c111cc",
        //     price: "1002",
        //   }
        // );
        console.log(data, "data");
        const newEntries = [
          {
            tariffId: "eea2bd79-047b-4f09-a249-b38fde76470911",
            parkId: "eea2bd79-047b-4f09-a249-b38fde76470dd1",
            englishName: "ccc",
            price: "100",
          },
          {
            tariffId: "eea2bd79-047b-4f09-a249-b38fde76470922",
            parkId: "eea2bd79-047b-4f09-a249-b38fde76470dd2222",
            englishName: "c111cc",
            price: "1002",
          },
        ];
        console.log(
          data.data.push(...newEntries),
          "data.data.push(...newEntries)"
        );
        setParkData(data.data || []);
        // setParkData(data.data || []);
      })
      .catch((error) => {
        console.error("Error fetching code and picture:", error);
      });
  };
  useEffect(() => {
    getCodeData();
  }, [vehType]);
  const getLPNListData = () => {
    getLPNList({
      userId,
      approvalStatus: "APPROVED",
      simplify: true,
    })
      .then((data) => {
        setCardData(data.data || []);
        setSelectedId(data.data?.[0].lpnId);
        setVehicleList(data.data[0]);
      })
      .catch((error) => {
        console.error("Error fetching code and picture:", error);
      });
  };

  useEffect(() => {
    getLPNListData();
  }, []);

  return (
    <>
      <Flex justify="space-between">
        <CustomSubTitle>Choose Your Vehicle</CustomSubTitle>
        <StyledClock>
          Time left for submit booking <img src={Time} alt="svg" />
          15:00
          {/* <Countdown
                  style={CountDownSytle}
                  title="Countdown"
                  value={deadline}
                  onFinish={clockEnd}
                /> */}
        </StyledClock>
      </Flex>

      <Row gutter={16}>
        {cardData.map((card) => {
          // 根据 vehType 获取对应的图标
          const iconSrc = vehicleIcons[card.vehType] || ""; // 如果找不到，使用空字符串
          return (
            <>
              <Col span={8} key={card.lpnId}>
                <Card
                  title={""}
                  style={{
                    cursor: "pointer",
                    backgroundColor: selectedId === card.lpnId ? "#F7F5F1" : "", // 选中时改变背景色
                    // boxShadow:
                    //   selectedId === card.id ? "0 4px 8px rgba(0,0,0,0.2)" : "none", // 选中时添加阴影
                    border:
                      selectedId === card.lpnId
                        ? "1px solid #7A6145"
                        : "1px solid #E1E1E1", // 选中时改变边框
                  }}
                  onClick={() => handleCardClick(card)} // 点击卡片时更新选中的 ID
                >
                  <Flex vertical justify="center" align="center">
                    <StyledImg src={iconSrc} alt={card?.vehType} />
                    <StyledVehicleTitle>{card.vehType}</StyledVehicleTitle>
                    <StyledVehicleNo>{card.lpnNo}</StyledVehicleNo>
                  </Flex>
                </Card>

                {passType === "MONTHLY" && selectedId === card.lpnId && (
                  <Descriptions style={{ marginTop: "10px" }} layout="vertical">
                    <Descriptions.Item label="Octopus No. ">
                      {card.octopus}
                    </Descriptions.Item>
                  </Descriptions>
                )}
              </Col>
            </>
          );
        })}
      </Row>

      <Divider plain></Divider>

      <RadioCarPark parkData={parkData} />
    </>
  );
};

export default CardSelection;
